<template>
  <div class="detailSwiper">
     <!-- 使用vant组件库 -->
      <van-swipe :autoplay="2000" class="my-swipe" indicator-color="red">
         <van-swipe-item v-for="(item,index) in topImages" :key="index">
            <img :src="item" alt="" @load="swiperLoad">
        </van-swipe-item>
      </van-swipe>
  </div>
</template>

<script>
//按需引入轮播图组件
import Swipe from 'vant/lib/swipe'
import SwipeItem from 'vant/lib/swipe-item'
import 'vant/lib/swipe/style'
import 'vant/lib/swipe-item/style'

export default {
  name:"DetailSwiper",
  props:{
    topImages:{
      type:Array,
      default(){
        return []
      }
    }
  },
  data(){
    return {
      count:false
    }
  },
  components:{
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem
  },
  methods:{
    swiperLoad(){
      if(!this.count){
        this.$emit('swiperLoad')
        this.count = true
      }
    }
  }
}
</script>

<style scoped>
  .detailSwiper {
    margin-top: 46px;
  }

   .my-swipe {
     height: 300px;
     overflow: hidden;
   }

  .my-swipe img {
    width: 100%;
  }
</style>